<template>
  <SdyHeader title="啥都有">
    <template #left>
      <van-icon class="cate-icon" name="aim" />
    </template>
    <template #title>
      <van-search @focus="inSearchHandler" shape="round" background="#c72418" placeholder="请输入搜索关键字" />
    </template>
    <template #right>
      登录
    </template>
  </SdyHeader>
    
  <!-- 轮播图 -->
  <SdyHomeBanner />

  <!-- 分类导航列表组件 -->
  <SdyHomeNavList />

  <!-- 首页秒杀热门 -->
  <SdyHomeHot />

  <!-- 商品列表 -->
  <SdyHomeGoodsList />
</template>

<script setup lang="ts">
// 导入组件使用
import SdyHomeBanner from './components/SdyHomeBanner.vue'
import SdyHomeNavList from './components/SdyHomeNavList.vue'
import SdyHomeHot from './components/SdyHomeHot.vue'
import SdyHomeGoodsList from './components/SdyHomeGoodsList.vue'
import { useRouter, type Router } from 'vue-router'

// 拿到编程式导航的路由控制器

const $router:Router = useRouter()

// 点击搜索框进入 search 路由
const inSearchHandler = () => {
  // console.log($router)
  // 进行路由跳转
  $router.push('/search')
}
</script>

<style scoped lang="scss">
@import '@/styles/variable.scss';
.cate-icon {
  font-size: 24px;
  color: orange;
}

</style>